<template>
  <div class="nav">
    <el-container>
      <Aside :titleData="titleData" :menuData="menuData"></Aside>
      <el-container>
        <el-header>
          <Header :title="title"></Header>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import "./menu_item.css";
import Aside from "./aside.vue";
import Header from "./header.vue";
export default {
  components: {
    Aside,
    Header,
  },
  data() {
    return {
      title: "疫苗采购上报系统",
      // 侧边栏数据
      titleData: {
        username: "李元",
        img: "",
        a: "团结新村社区卫生服务中心",
      },
      // 导航数据
      menuData: [
        {
          submenuName: "疫苗采购计划报告",
          subId: "10",
          icon: "el-icon-tickets",
          children: [
            {
              menuItemName: "免疫计划疫苗采购计划",
              menuItemId: "11",
              url: "/immunizationPlan",
            },
            {
              menuItemName: "非免疫计划疫苗采购计划",
              menuItemId: "12",
              url: "/a1",
            },
          ],
        },
        {
          submenuName: "疫苗采购计划统计",
          subId: "20",
          icon: "el-icon-data-line",
          children: [
            {
              menuItemName: "免疫计划疫苗采购统计",
              menuItemId: "21",
              url: "/a2",
            },
            {
              menuItemName: "非免疫计划疫苗采购统计",
              menuItemId: "22",
              url: "/a3",
            },
          ],
        },
      ],
    };
  },
  methods: {},
  mounted() {
    // this.getMenuItemIcon();
  },
};
</script>
<style lang="scss">
.el-header {
  display: flex;
  align-items: center;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 4px;
  // justify-content: center;
  background-color: #fff;
  padding: 0 30px;
}

.nav {
  height: 100%;
  .el-container {
    height: 100%;
  }
}
.line {
  width: 280px;
  height: 1px;
  margin-left: 10px;
  border-top: 1px #fff dotted;
}
</style>
